<template>
  <div class="issue">
    <div class="menu">
      <van-nav-bar
        fixed
        title="编辑菜谱"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="issue_img" id="preview">
      <img class="aout_img" src="" alt="" ref="imgurl" />
      <input v-show="ish" ref="url" type="file" @change="addEventListener" />
    </div>
    <textarea
      class="issue_title"
      name="issue_title"
      placeholder="给这个菜起个菜名吧"
    ></textarea>
    <textarea
      class="issue_nav"
      name="issue_nav"
      placeholder="可以写写这道菜背后的故事"
    ></textarea>
    <div class="addcai">
      <h3>添加食材</h3>
      <div class="box_list">
        <div class="li">
          <textarea class="li_left" placeholder="食材：如五花肉"></textarea>
          <textarea class="li_right" placeholder="用量：如50g"></textarea>
        </div>
        <div class="det">
          <van-icon name="cross" size="0.4rem" />
        </div>
      </div>
      <div class="add">添加食材</div>
    </div>
    <div class="step">
      <h3>烹饪步骤</h3>
      <div class="step_box">
        <div class="step">
          <div class="step_top">第1步</div>
          <div class="step_center">
            <img class="auto_img" src="" />
          </div>
          <textarea
            class="step_bottom"
            name="step_nav"
            placeholder="步骤详情"
          ></textarea>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "issue",
  data() {
    return {
      ish: true,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
      //   Toast("返回");
    },
    addEventListener() {
      let read = new FileReader();
      let reg = /^data:image/;

      this.$nextTick(() => {
        let imgsrc = this.$refs.imgurl;
        // console.log(imgsrc);
        let oFile = this.$refs.url.files[0];
        read.onload = function () {
          if (reg.test(this.result)) {
            imgsrc.src = this.result;
          } else {
            alert("您输入的图片格式有误");
            return false;
          }
        };
        read.readAsDataURL(oFile);
      });

      this.ish = false;
    },
  },
};
</script>

<style lang="less" scoped>
.issue {
  width: 100%;
  height: 100%;
  .menu {
    width: 100%;
    height: 45px;
  }
  .issue_img {
    width: 100%;
    min-height: 300px;
    background-color: rgb(241, 239, 239);
    text-align: center;
    line-height: 300px;
  }
  .issue_title {
    margin: 15px 5%;
    width: 90%;
    //   padding: 0 5%;
    height: 50px;
    line-height: 50px;
    font-size: 0.4rem;
    font-weight: bold;
    color: black;
    border: transparent;
    background-color: rgb(241, 239, 239);
    resize: none;
    border-radius: 10px;
  }
  .issue_nav {
    width: 90%;
    margin: 0 5%;
    font-size: 0.3rem;
    color: black;
    height: 100px;
    font-weight: bold;
    border: transparent;
    background-color: rgb(241, 239, 239);
    resize: none;
    border-radius: 10px;
  }
  .addcai {
    width: 90%;
    margin: 0 5%;
    .box_list {
      position: relative;
      width: 100%;
      height: 40px;
      .li {
        width: 90%;
        height: 40px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        .li_left {
          resize: none;
          border: transparent;
        }
        .li_right {
          resize: none;
          border: transparent;
        }
      }
      .det {
        position: absolute;
        right: 10px;
        top: 10px;
      }
    }
    .add {
      width: 50%;
      margin-left: 25%;
      margin-top: 10px;
      text-align: center;
      height: 25px;
      line-height: 25px;
      border-radius: 20px;
      background-color: #ccc;
    }
  }
  .step {
    width: 90%;
    margin: 0 5%;
    .step {
      width: 90%;
      margin: 0 5%;
      // background-color: pink;
      margin-bottom: 10px;
      .step_top {
        width: 100%;
        padding-bottom: 15px;
        font-weight: bold;
      }
      .step_center {
        width: 100%;
        min-height: 250px;
        padding-bottom: 15px;
        background-color: rgb(241, 239, 239);
      }
      .step_bottom {
        min-height: 30px;
        margin: 15px 0;
        width: 100%;
        font-weight: bold;
        color: black;
        border: transparent;
        background-color: rgb(241, 239, 239);
        resize: none;
      }
    }
  }
}
.aout_img {
  width: 100%;
  display: block;
}
</style>